<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tab栏切换</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;

        }

        #nva {
            margin: 0px auto;
        }

        #nva ul {
            width: 600px;
            display: flex;
            background-color: rgb(212, 212, 212);
        }

        #nva ul li {
            width: 120px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            list-style: none;
            flex-direction: row;

        }

        .current {
            background-color: red;
        }

        .itme {
            display: none;
        }
    </style>
</head>

<body>
    <div id="all">
        <!-- 上面部分 -->
        <div id="nva">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价</li>
                <li>手机社区</li>
            </ul>
        </div>
        <!-- 下面部分 -->
        <div id="bottom">
            <div class="itme" style="display: block;">商品介绍</div>
            <div class="itme">规格与包装</div>
            <div class="itme">售后保障</div>
            <div class="itme">商品评价</div>
            <div class="itme">手机社区</div>
        </div>
    </div>
    <script>
        //选项卡模块排他思想
        var ta = document.querySelector('#nva')
        var list = ta.querySelectorAll('li')
        //获取下面的
        var bto=document.querySelector('#bottom')
        var bto_list=bto.querySelectorAll('.itme')
        // console.log(list);
        //排他思想
        //for循环绑定事件
        for (var i = 0; i < list.length; i++) {
            // 开始给li设置索引
            list[i].setAttribute('index',i)
            list[i].onclick=function(){
                
                for(var i = 0; i < list.length; i++){
                    list[i].className=''
                    
                }
                this.className='current'
                //获取索引
                var index=this.getAttribute('index')
                //排他思想，先隐藏后显示
                for(var i = 0; i < bto_list.length; i++){
                    bto_list[i].style.display='none'
                    
                }
                bto_list[index].style.display='block'
                
                // console.log(index);
                
            }
        }
        

    </script>
</body>

</html>